<template>
  <div class="star">
       <div class="star-item1">
        <img src="./star_2.png">
      </div>
      <div class="star-item2"  :style="{width:starSize/5 *120+'px'}">
        <img src="./star_1.png">
      </div>
  </div>
</template>

<script>
export default {
    data () {
        return {

        }
    },
    props:{
    starSize:{
        type:Number
        },
//     score:{
//         type:Number
//         }
//     },
    }
}

</script>
<style>
.star{
    position: relative;
    width: 120px;
    height: 30px;
}
.star .star-item1{
    overflow: hidden;
    position: absolute;
    z-index: -1;
}
.star .star-item1 img{
    width: 120px;
}
.star .star-item2{
    width: 120px;
    height: 30px;
    position: absolute;
    z-index: 1;
    overflow: hidden;
}
.star .star-item2 img{
     width: 120px;
}
</style>
